<template>
  <div class="icon-layout">
    <div class="btn">
      <div v-for="icon in componentData.icon" :key="icon.id" class="btn-item">
        <img
          :src="icon.url"
          :style="{
            filter: `drop-shadow(${componentData.defaultColor} 400px 0)`,
          }"
          alt=""
        />
        <span
          class="ft-8 mt-10"
          :style="{
            color: componentData.defaultColor,
          }"
        >
          {{ icon[`title${capitalizeLang}`] }}
        </span>
        <span
          class="ft-8"
          :style="{
            color: componentData.defaultColor,
          }"
        >
          {{ icon[`subtitle${capitalizeLang}`] }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
  },
  methods: {},
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.icon-layout {
  background-color: #F6F7F9;
  position: relative;
  overflow: hidden;
  min-height: 60px;

  .btn {
    display: flex;
    color: #0261bc;
    justify-content: center;
    .ft(12);
    .pd(40, 0, 40, 0);

    .btn-item {
      display: flex;
      flex-direction: column;
      text-align: center;
      overflow: hidden;
      position: relative;
      align-items: center;
      .maxWidth(194);
      .pd(0, 40, 0, 40);
      .ft(12);

      & + .btn-item {
        &::after {
          .height(90);
          content: '';
          width: 1px;
          display: block;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          border-left: 1px solid;
          border-image: linear-gradient(
              360deg,
              rgba(255, 255, 255, 0),
              rgba(149, 186, 230, 1),
              rgba(255, 255, 255, 0)
            )
            1 1;
        }
      }

      img {
        .width(72);
        .height(72);
        filter: drop-shadow(#0261bc 400px 0); // 在右侧 400px 加一个 #FFF 的阴影
        transform: translateX(-400px);
        margin-bottom: 0;
        margin: 0 auto;
      }

      .ft-8 {
        .ft(30);
        .lineH(32);
        .mg(8, 0, 0, 0);
        display: block;
        zoom: 0.5;
      }

      .mt-10 {
        .mg(30, 0, 0, 0);
      }
    }
  }
}
</style>
